<template>
    <div>
      <el-button type="success" @click="addDialogVisible = true">添加药品</el-button>
      
      <el-table :data="medicationData" style="width: 100%" stripe border>
        <el-table-column prop="id" label="ID" width="80"></el-table-column>
        <el-table-column prop="name" label="药品名"></el-table-column>
        <el-table-column prop="price" label="价格"></el-table-column>
        <el-table-column prop="number" label="数量"></el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="handleEdit(scope.row.id)">修改</el-button>
            <el-button type="danger" size="mini" @click="handleDelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <!-- 修改弹窗 -->
      <el-dialog :visible.sync="editDialogVisible" title="修改药品信息">
        <el-form :model="editFormData" label-width="80px">
          <el-form-item label="药品名" prop="name">
            <el-input v-model="editFormData.name"></el-input>
          </el-form-item>
          <el-form-item label="价格" prop="price">
            <el-input v-model="editFormData.price"></el-input>
          </el-form-item>
          <el-form-item label="数量" prop="number">
            <el-input v-model="editFormData.number"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="editDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleUpdate">确认修改</el-button>
        </div>
      </el-dialog>
      
      <!-- 添加弹窗 -->
      <el-dialog :visible.sync="addDialogVisible" title="添加药品信息">
        <el-form :model="addFormData" label-width="80px">
          <el-form-item label="药品名" prop="name">
            <el-input v-model="addFormData.name"></el-input>
          </el-form-item>
          <el-form-item label="价格" prop="price">
            <el-input v-model="addFormData.price"></el-input>
          </el-form-item>
          <el-form-item label="数量" prop="number">
            <el-input v-model="addFormData.number"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="addDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleAdd">确认添加</el-button>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import axios from 'axios';
  
  export default {
    data() {
      return {
        medicationData: [],
        editDialogVisible: false,
        editFormData: {
          id: null,
          name: '',
          price: '',
          number: '',
        },
        addDialogVisible: false,
        addFormData: {
          name: '',
          price: '',
          number: '',
        },
      };
    },
    methods: {
      fetchMedication() {
        axios.get('http://127.0.0.1:3000/api/medication')
          .then(response => {
            this.medicationData = response.data;
          })
          .catch(error => {
            console.error('查询 Medication 出错：', error);
          });
      },
      handleEdit(id) {
        const medication = this.medicationData.find(item => item.id === id);
        this.editFormData = { ...medication };
        this.editDialogVisible = true;
      },
      handleUpdate() {
        axios.put(`http://127.0.0.1:3000/api/medication/${this.editFormData.id}`, this.editFormData)
          .then(response => {
            console.log(response.data.message);
            this.editDialogVisible = false;
            this.$message.success('药品信息修改成功');
            this.fetchMedication();
          })
          .catch(error => {
            console.error(`修改 Medication 记录时发生错误：${error}`);
          });
      },
      handleDelete(id) {
        axios.delete(`http://127.0.0.1:3000/api/medication/${id}`)
          .then(response => {
            console.log(response.data.message);
            this.fetchMedication();
          })
          .catch(error => {
            console.error(`删除 Medication 记录时发生错误：${error}`);
          });
      },
      handleAdd() {
        axios.post('http://127.0.0.1:3000/api/medication', this.addFormData)
          .then(response => {
            console.log(response.data.message);
            this.addDialogVisible = false;
            this.$message.success('药品添加成功');
            this.fetchMedication();
          })
          .catch(error => {
            console.error(`添加 Medication 记录时发生错误：${error}`);
          });
      },
    },
    mounted() {
      this.fetchMedication();
    },
  };
  </script>
  <style scoped>
  .el-table--border {
    border-right: none;
    border-bottom: none;
    margin-top: 20px !important;
}
</style>